<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height: 100px;border: solid 1px black;position: relative;margin: 30px auto}
        .box p{margin: 0;height: 30px;background: #88f;position: absolute;left:0;top:35px;width: 0px;text-align: center;line-height: 30px;color: #fff;}
        
        .drag{width: 400px;height: 300px;background: pink;position: absolute;left:0;top:0;display: none;}
        .drag h2{margin: 0;padding: 10px 0;background: #222;color: #fff;cursor: move}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
    <div class="drag">
        <h2>这是可被拖拽的部分</h2>
        <div class="cont">
            这是内容区域
        </div>
    </div>
</body>
<script>
    var odrag = document.querySelector(".drag");
    var oh2 = document.querySelector(".drag h2");
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    var odragW = odrag.offsetWidth;
    var odragH = odrag.offsetHeight;


    var obox = document.querySelector(".box")
    var op = document.querySelector("p")
    var t;
    var speed = 3;
    var target = 400;
    document.onclick = function(){
        clearInterval(t);
        t = setInterval(function(){
            var now = op.offsetWidth;
            if(target - now < speed){
                clearInterval(t);
                op.style.width = target + "px";
                op.innerHTML = "100%";

                obox.style.display = "none";
                odrag.style.display = "block";

            }else{
                op.style.width = now + speed + "px";
                op.innerHTML = parseInt(now / target * 100) + "%";
            }
        }, 30);
    }

    // 按下
    oh2.onmousedown = function(eve){
        var downE = eve || window.event;
        downE.preventDefault();
        // 移动
        // 鼠标移动是一个高频事件
        document.onmousemove = function(eve){
            var moveE = eve || window.event;
            // 移动时，改变元素的位置为：
                // 当前鼠标在页面的坐标 - 鼠标在元素身上按下的坐标
            var l = moveE.pageX - downE.offsetX;
            var t = moveE.pageY - downE.offsetY;

            // 边界限定
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > clientW - odragW) l = clientW - odragW;
            if(t > clientH - odragH) t = clientH - odragH;

            // 将计算并限定之后的位置设置给元素
            odrag.style.left = l + "px";
            odrag.style.top = t + "px";
        }
        // 抬起
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }

</script>
</html>